<template>
	<view class="tabview">
		<!-- <view class="yintab"></view> -->
		<image class="tabyin" src="/static/tabbar/tabyin.png" mode="" />
		<image class="botxian" src="/static/tabbar-bgtwo.png" mode="" />
		<view class="tianse"></view>
		<view class="tablist">
			<!-- <view class="tabitem tactive">
				<view class="tab one">
					<image class="tabones" src="/static/tabbar/tabones.png" mode="" />
					<image class="tabonestwo" src="/static/tabbar/tabone.png" mode="" />
				</view>
				<text class="tabname">商单</text>
			</view> -->
			<view class="tabitem" :class="tabIndex==item.id?'tactive':''" v-for="(item,index) in tablist" :key="index" @click="gettabbar(item)">
				<view class="tab"  :style="{ marginTop: item.mt+'px' }">
					<image class="tabones" :src="item.iconPath" mode="" />
					<image class="tabonestwo" :src="item.selectedIconPath" mode="" />
				</view>
				<text class="tabname">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Tabbar",
		props: {
			tabIndex:{
				type: Number,
				default:1
			},
			// title:{
			// 	type:String,
			// 	default:''
			// },
			// isback:{
			// 	type:Boolean,
			// 	default:true
			// },
			// backColor:{
			// 	type: String,
			// 	default:'rgba(17, 17, 17, 1);'
			// }
		},
		data() {
			return {
				background: {
					 background: this.backgroundColor||'#fff'
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				tablist:[
					{id:1,url:'/pages/tabbar/Home',iconPath:'/static/tabbar/tabones.png',selectedIconPath:'/static/tabbar/tabone.png',name:'商单',mt:'-8'},
					{id:2,url:'/pages/tabbar/Jing',iconPath:'/static/tabbar/tabtwos.png',selectedIconPath:'/static/tabbar/tabtwo.png',name:'进行中',mt:'-4'},
					{id:3,url:'/pages/tabbar/Pai',iconPath:'/static/tabbar/tabthrees.png',selectedIconPath:'/static/tabbar/tabthree.png',name:'派单',mt:'-6'},
					{id:4,url:'/pages/tabbar/Mine',iconPath:'/static/tabbar/tabfours.png',selectedIconPath:'/static/tabbar/tabfour.png',name:'我的',mt:'-12'}
				],
				// tabIndex:1
			};
		},
		methods:{
			gettabbar(item){
				uni.switchTab({ url: item.url })
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabview{
	height: 80px;
	opacity: 1;
	// background: rgba(255, 255, 255, 1);
	// border: 2px solid rgba(119, 102, 231, 1);
	// box-shadow: 0px -6px 10px  rgba(119, 102, 231, 0.08);
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 10000;
	.yintab{
		height: 118px;
		opacity: 1;
		background: linear-gradient(180deg, rgba(248, 248, 253, 1) 0%, rgba(248, 248, 253, 0.63) 76.94%, rgba(248, 248, 253, 0) 100%);
		position: absolute;
		bottom: 0;
		width: 100%;

	}
	.tabyin{
		height: 118px;
		opacity: 1;
		// background: linear-gradient(180deg, rgba(248, 248, 253, 1) 0%, rgba(248, 248, 253, 0.63) 76.94%, rgba(248, 248, 253, 0) 100%);
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.botxian{
		position: absolute;
		width: 100%;
		height: 50px;
		top: 0;
	}
	.tianse{
		height: 30px;
		position: absolute;
		width: 100%;
		background-color: #fff;
		bottom: 0;
	}
	.tablist{
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.tabitem{
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.tab{
			width: 45px;
			height: 45px;
			opacity: 1;
			border-radius: 12px;
			background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 253, 1) 100%);
			box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5px;
			position: relative;
		}
		.tabones{
			width: 23px;
			height: 23px;
		}
		.tabonestwo{
			width: 23px;
			height: 23px;
			display: none;
		}
		.tabname{
			font-size: 12px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);

		}
		.one{
			margin-top: -6px;
		}
	}
	.tactive{
		
		// box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
		.tab{
			background: linear-gradient(180deg, rgba(121, 72, 234, 1) 0%, rgba(119, 102, 231, 1) 100%);
			.tabones{
				display: none;
			}
			.tabonestwo{
				display: inline-block;
			}
		}
		.tabname{
			font-weight: 700;
			color: rgba(119, 102, 231, 1);
		}
	}
}
</style>